import React, { useEffect, useRef } from 'react';
import { Toast, NavBar } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import * as echarts from 'echarts';
import './index.css'
function index() {
    const navigate = useNavigate()
    const chartRef = useRef(null);
    const chartRef1 = useRef(null);
    useEffect(() => {
        const myChart = echarts.init(chartRef.current);
        const option = {
            title: {
                text: '最近7次血压'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                }
            ]
        };
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    })

    useEffect(() => {
        const myChart1 = echarts.init(chartRef1.current);
        const option1 = {
            title: {
                text: '心率'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                }
            ]
        };
        myChart1.setOption(option1);
        return () => {
            myChart1.dispose();
        };
    })
    return (
        <div>
            <div onClick={() => navigate('/device')}>
                <NavBar
                    title='血压管家'
                    onClickLeft={() => navigate(-1)}
                    rightText="我的设备"
                    onClickRight={() => Toast('按钮')}
                />
            </div>
            <div className='butherCss'>
                <div ref={chartRef} style={{ width: '100&', height: '270px' }}></div>
            </div>


            <div className='butherCss1'>
                <div ref={chartRef1} style={{ width: '100&', height: '270px' }}></div>
            </div>
        </div>
    )
}

export default index